<template>
  <div class="text-red-400 text-xl">这里是规则, 紧急施工中...</div>
  <div>
    <el-input class="my-2" size="small" v-model="webName" placeholder="网站名字">
      <template #prepend>网站名字</template>
    </el-input>
    <el-input class="my-2" size="small" v-model="webUrl" placeholder="网站地址">
      <template #prepend>网站地址</template>
    </el-input>
    <el-input class="my-2" size="small" v-model="prefix" placeholder="网站搜索前缀">
      <template #prepend>网站搜索前缀</template>
    </el-input>
    <el-input class="my-2" size="small" v-model="suffix" placeholder="网站搜索后缀">
      <template #prepend>网站搜索后缀</template>
    </el-input>
  </div>
  <div>
    <p>代码规则: </p>
    <Codemirror
      class="mt-1"
      v-model:value="code"
      :options="cmOptions"
      border
      placeholder="测试 placeholder"
      :height="350"
      @change="onChange"
    />
  </div>
  <div class="mt-3 text-right">
    <el-button type="primary" @click="Submit">提交</el-button>
  </div>
</template>

<script setup lang="ts">
import Codemirror from "codemirror-editor-vue3"
// plugin-style
import "codemirror-editor-vue3/dist/style.css";
// language
import "codemirror/mode/javascript/javascript.js";
import { reactive, Ref, ref } from "vue"

const utools = window.utools

let list = JSON.stringify(
  `$('.xing_vb ul li').each(function(index, item) {
    let vodName = $(item).find('.xing_vb4').text()
    let vodUrl = $(item).find('.xing_vb4 a').attr('href')
    let vodType = $(item).find('.xing_vb5').text()
    let vodDate = $(item).find('.xing_vb7').text()
    if (vodName) {
      let data = {
        _id: uuid.generate(),
        vodName,
        vodUrl,
        vodType,
        vodDate
      }
      listData.list.push(data)
    }
  })`
)
let detail = `
  let poster = $('.vodBox img').attr('src')
    let name = $('.vodBox .vodh h2').text() + $('.vodBox .vodh span').text()
    let douban = $('.vodBox .vodh label').text()
    let alias =$('.vodBox .vodinfobox li').eq(0).text()
    let director = $('.vodBox .vodinfobox li').eq(1).text()
    let starring = $('.vodBox .vodinfobox li').eq(2).text()
    let categories = $('.vodBox .vodinfobox li').eq(3).text()
    let area =$('.vodBox .vodinfobox li').eq(4).text()
    let lang =$('.vodBox .vodinfobox li').eq(5).text()
    let release =$('.vodBox .vodinfobox li').eq(6).text()
    let date =$('.vodBox .vodinfobox li').eq(7).text()
    let introduction = $('.playBox').eq(0).children('.vodplayinfo').text()
    console.log($("title").text());
    let links = []
    $('.playBox').eq(1).find('ul').eq(1).children('li').each(function(index, item) {
      links.push($(item).text())
    })
    data = {
      _id: res.options.id,
      poster,
      name,
      douban,
      director,
      starring,
      categories,
      area,
      lang,
      release,
      date,
      alias,
      introduction,
      links
    }
`
// const code = ref(`
//   let obj = {
//     list: ${list},
//     detail: ${detail}
//   }
// `)


const code = ref()

const cmOptions = reactive({
  mode: 'text/javascript', // 语言模式
  theme: 'default', // 主题
  lineNumbers: true, // 显示行号
  smartIndent: true, // 智能缩进
  indentUnit: 2, // 智能缩进单位为4个空格长度
  foldGutter: true, // 启用行槽中的代码折叠
  styleActiveLine: true, // 显示选中行的样式
})

// const webName: Ref = ref('tiankongzy')
// const webUrl: Ref = ref('http://tiankongzy.cc')
// const prefix: Ref = ref('http://tiankongzy.cc/index.php/vod/search.html?wd=')
// const suffix: Ref = ref('&submit=search')

const webName: Ref = ref('')
const webUrl: Ref = ref('')
const prefix: Ref = ref('')
const suffix: Ref = ref('')

const onChange = (value: string, instance: object) => {
  // console.log('value', value)
}

const Submit = () => {
  console.log('code.value', code.value)
  // let res = utools.db.put('rule/' + webName.value)
}


</script>

